<template>
	<div>
		<div class="outDiv">
			<scroller lock-x>
				<div>
					<div class="mainContent">
						<div class="contentTitle">教师用户中心</div>
						<div class="topImage">
							<img src="~/static/images/signin_pic_bg.png">
						</div>
						<div class="content">
							
							<div class="tabWrap">
								<tab :line-width="8" :custom-bar-width="barWidth" active-color="#222" default-color="#999" class="tabItem">
									<tab-item @on-item-click="onItemClick" selected>手机登录</tab-item>
									<tab-item @on-item-click="onItemClick">短信登录</tab-item>
								</tab>
							</div>
							<div class="boxloginWrap">
								<div v-show="`${tabIndex}`==0">
									<div class="login1">
										<xInput :showXx="showxx" :errMsg="errMsgs1" plvalue="请输入登录手机号" groupTitle="手机号码" type="num" v-model="vals1"></xInput>
										<xInput :showXx="showxx" :errMsg="errMsgs2" v-model="vals2" plvalue="请输入密码" groupTitle="密码" type="pwd"></xInput>
									</div>
								</div>
								<div v-show="`${tabIndex}`==1">
									<div class="login2">
										<xInput :showXx="showxx" :errMsg="errMsgs3" plvalue="请输入登录手机号" groupTitle="手机号码" type="num" v-model="vals3"></xInput>
										<xInput :showXx="showxx" :errMsg="errMsgs4" v-model="vals4" plvalue="请输入验证码" :yzmtrue='showyzm' groupTitle="验证码" type="yzm" :yzmMsg='yzmMsg' v-on:sends="sendYzm"></xInput>
									</div>
								</div>
								<div class="btn" @click="suresLogin(tabIndex)">登录</div>
								<span  @click="commonJs.gosto('register')" class="goresta">没有账号？立即注册</span>
							</div>
						</div>
						<div class="footerSign">© 2019 sx985.com, all rights reserved</div>
					</div>
					<div style="width: 100%;height: 10vh;"></div>
				</div>
			</scroller>

		</div>
	</div>
</template>

<script>
	import xInput from '~/components/xInput_2'
	import axios2 from '~/plugins/axios2';
	import ls from 'store2'
	import axios from '~/plugins/axios';
	import JSEncrypt from 'jsencrypt/bin/jsencrypt'
	import { Tab, TabItem } from 'vux';
	export default {
		components: {
			xInput,
			Tab,
			TabItem
		},
		data() {
			return {
				barWidth: function () {
					return '0.48rem'
				},
				ssres: '',
				vals1: "",
				vals2: "",
				errMsgs1: "",
				errMsgs2: "",
				showxx: false,

				vals3: "",
				vals4: "",
				errMsgs3: "",
				errMsgs4: "",
				
				verifyType: 1,
				tabIndex: 0,

				yzmMsg: '获取验证码',
				showyzm: false,
				timer: null,
				nNum: 60,
				showColor: 'cancel',
				showColor1: 'cancel',
				
			}
		},
		watch: {
			vals1(e) {
				if (e.length == 11) {
					const reg = /^1[345789]\d{9}$/;
					if (!reg.test(e)) {
						this.errMsgs1 = "请输入正确的11位手机号"
					} else {
						this.errMsgs1 = ""
					}
				}
				this.showxx = false
			},
			vals2(e) {
				if (e === "") {
					this.errMsgs2 = "请输入您的登录密码"
				} else {
					this.errMsgs2 = ""
				}
				if (this.errMsgs2 === '' & this.errMsgs1 === '' & this.vals1 != '请输入手机号' & e != '请输入登录密码') {
					this.showColor = 'sure';
				} else {
					this.showColor = 'cancel';
				}
			},
			//vals3验证码手机号 vals4 验证码
			vals3(e) {
				const reg = /^1[345789]\d{9}$/;
				if (reg.test(e)) {
					this.showyzm = true;
					if (this.vals4.length > 3) {

						this.showColor1 = 'sure'
					} else {
						this.showColor1 = 'cancle'
					}
				} else {
					this.showyzm = false;
					this.showColor1 = 'cancle'
					this.yzmMsg = '获取验证码';
					this.nNum = 60;
					clearInterval(this.timer);
				}

			},
			vals4(e) {
				const reg = /^1[345789]\d{9}$/;
				if (e.length > 3 && reg.test(this.vals3)) {
					this.showColor1 = 'sure';
				} else {
					this.showColor1 = 'cancel';
				}
			},

		},
		mounted() {
			this.$vux.loading.hide()
			localStorage.clear()
		},
		methods: {
			clear() {
				this.vals1 = "";
				console.log("clear")
				console.log("this.vals1", this.vals1)
			},

			sendYzm() {
				if (this.nNum < 60) {
					this.$vux.toast.text("请稍后发送");
					return false;
				}
				if (this.showyzm == false) {
					this.$vux.toast.text("请输入正确11位手机号码");
					return false;
				}

				this.senyam();

				axios2.post("/identity/sendTeacherMessageCode", {
						codeType: 1,
						mobile: this.vals3
					})
					.then(res => {
						this.$vux.toast.text(res.message);
						if (res.message !== '已发送验证码') {
							clearInterval(this.timer);
							this.yzmMsg = '获取验证码';
							this.showyzm = true;
							this.nNum = 60;
						}
					})
					.catch((error) => {
						this.$vux.toast.text(error);
					});

			},
			senyam() {
				this.showyzm = false

				this.timer = setInterval(() => {
					this.nNum -= 1;
					this.yzmMsg = '重新获取' + this.nNum;
					if (this.nNum <= 0) {
						clearInterval(this.timer)
						this.yzmMsg = '获取验证码';
						this.showyzm = true;
						this.nNum = 60;
					}
				}, 1000)
			},


			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			suresLogin(type) {
				if (type == 0) {
					if (this.showColor === 'sure') {
						const reg = /^1[345789]\d{9}$/;
						if (this.vals1.length < 11 && !reg.test(this.vals1)) {
							this.$vux.toast.text('未正确填写登录手机号');
							return false;
						}
						if (this.vals2 == '') {
							this.$vux.toast.text('未填写登录密码');
							return false;
						}
		
						let encryptor = new JSEncrypt() // 新建JSEncrypt对象				 
						let publicKey =
							`MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
						encryptor.setPublicKey(publicKey) // 设置公钥		
						this.regTime = new Date().getTime();
						this.rsaPassWord = encryptor.encrypt(this.regTime + this.vals2) // 对需要加密的数据进行加密
						console.log(this.rsaPassWord)
						this.loginTea(this.vals1, this.rsaPassWord, this.regTime)
					} else {
						this.$vux.toast.text('请正确填写登录信息');
					}	

				} 
				if (type == 1) {
					if (this.showColor1 === 'sure') {
						this.timss = new Date().getTime();
						this.loginTea(this.vals3, this.vals4, this.timss)
					} else {
						this.$vux.toast.text('请正确填写登录信息');
					}
				}



			},
			loginTea(phonenum, yzm, times) {
				let _this = this;
				_this.$vux.loading.show();
				axios2.post('/identity/teacherLogin', {
					'account': phonenum,
					'credentials': yzm,
					'loginTime': times,
					'verifyType': this.verifyType
				}).then(res => {
					_this.$vux.loading.hide();
					_this.$vux.toast.text(res.message);
					if (res.data) {
						console.log('logings', res)
						let token = res.data.accessToken;
						let userData = res.data;
						ls.set('userType',res.data.userType)
						ls.set('tokens', token)
						ls.set('userData', userData)
						setTimeout(function() {						
							_this.commonJs.gosto('teaindex');

						}, 50)
					}
				}).catch(() => {
					this.$vux.toast.text('登录失败，请重新登录');
				})
			},
			
			onItemClick(index) {
				this.tabIndex = index;
				this.verifyType = index + 1;
				if (index == 0) {
					this.vals3 = "";
					this.vals4 = "";
				} else {
					this.vals1 = "";
					this.vals2 = "";
				}
			},






		}
	}
</script>

<style lang="less" scoped>
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #FFF;

		.mainContent {
			position: relative;
			padding: 0;

			.contentTitle {
				margin-top: 0.32rem;
				font-size: 0.36rem;
				line-height: 0.5rem;
				font-weight: bold;
				color: #222;
				text-align: center;
			}

			.topImage {
				position: relative;
				width: 100%;
				z-index: 1000;

				img {
					width: 100%;
					height: 3.82rem;
				}
			}

			.content {
				position: relative;
				top: -0.47rem;
				width: 6.86rem;
				height: 7.36rem;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0 2px 10px 0 rgba(153, 153, 153, 0.2);
				border-radius: 0.2rem;
				margin: 0 0.32rem;
				padding: 0.4rem 0.32rem 0;

				.tabWrap {
					padding: 0 0.5rem;
					box-sizing: border-box;

					.vux-tab .vux-tab-item {
						background: #fff;
						font-size: 0.3rem;
						font-family: PingFang-SC-Bold;
						font-weight: bold;
						letter-spacing: 1px;
						line-height: 0.5rem;
					}

					/deep/ .vux-tab .vux-tab-ink-bar .vux-tab-bar-inner{
						width: 0.48rem;
						background: #409EFF !important;
						text-align: center;
						border-radius: 4px;
					}

				}

				.boxloginWrap {
					width: 100%;
					height: auto;
					margin-top: 0.4rem;
					box-sizing: border-box;

					.login1, .login2 {
						width: 100%;
						height: auto;
						box-sizing: border-box;
						margin-bottom: 0.64rem;
					}

					.btn {
						height: 0.88rem;
						line-height: 0.88rem;
						width: 100%;
						border-radius: 0.44rem;
						background: #409EFF;
						color: #FFF;
						text-align: center;
						font-weight: bold;
					}

					.goresta {
						font-size: 0.3rem;
						color: rgb(64, 158, 255);
						display: block;
						height: 0.6rem;
						line-height: 0.6rem;
						text-align: center;
						text-decoration: none;
						margin-top: 0.3rem;
					}

				}
			}

			.footerSign {
				font-size: 0.22rem;
				color: #999;
				text-align: center;
				margin-top: 0.1rem;
			}
		}
	}
</style>
